<template>
  <a-card :bordered="false">
    <!-- <div class="history-title">
      <div class="title-text">历史数据</div>
      <div @click="historyClose">
        <a-icon type="close-circle" :style="{ fontSize: '20px', color: '#ccc' }" />
      </div>
    </div> -->
    <!-- 查询区域 -->

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="24">
            <a-form-item label="起始时间">
              <a-date-picker
                v-model="form.startTime"
                :disabled-date="disabledStartDate"
                style="width:100%"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
              />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="终止时间">
              <a-date-picker
                v-model="form.endTime"
                :disabled-date="disabledEndDate"
                style="width:100%"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
              />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="设备位置">
              <!-- <a-select v-model="form.deviceIds" placeholder="请选择设备" mode="tags" :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode;
                  }
                ">
                <a-icon slot="suffixIcon" type="gold" />
                <a-select-option v-for="item in equipData" :value="item.id" :key="item.id">{{item.title}}
                </a-select-option>
              </a-select> -->
              <a-tree-select
                v-model="form.locations"
                style="width: 100%"
                class="treeSelect"
                :tree-data="equipData"
                tree-checkable
                :show-checked-strategy="SHOW_CHILD"
                placeholder="请选择设备位置"
                :maxTagCount="0"
                :dropdownStyle="{ height: '280px' }"
                :show-arrow="true"
              />
              <!-- <a-icon  style='position: absolute;top:3px;right:10px;color:rgba(0, 0, 0, 0.25);' type="setting" />  -->
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="数据类型">
              <a-select v-model="form.states" placeholder="请选择数据类型" mode="multiple" :show-arrow="true">
                <a-select-option value="1">状态</a-select-option>
                <a-select-option value="2">报警</a-select-option>
                <a-select-option value="3">指令</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="nGetDataList(1)">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <a-spin :spinning="loading" tip="加载中">
      <a-table
        style="margin-top:10px"
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
      </a-table>
    </a-spin>
    <!-- <gd-healthy-prediction-modal ref="modalForm" @ok="modalFormOk"></gd-healthy-prediction-modal> -->
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { postAction, getAction } from '@/api/manage'
import debounce from 'lodash/debounce'

// import GdHealthyPredictionModal from './modules/GdHealthyPredictionModal'
import { TreeSelect } from 'ant-design-vue'
const SHOW_CHILD = TreeSelect.SHOW_CHILD
export default {
  name: 'HistoricalData',
  mixins: [mixinDevice, JeecgListMixin],
  components: {
    // GdHealthyPredictionModal
  },
  data() {
    return {
      description: '历史数据查询',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '日期/时间',
          align: 'center',
          dataIndex: 'receiveTime'
        },
        {
          title: '设备',
          align: 'center',
          dataIndex: 'deviceName'
        },
        {
          title: '数据类型',
          align: 'center',
          dataIndex: 'state'
        },
        {
          title: '数据名称',
          align: 'center',
          dataIndex: 'dataType'
        },
        {
          title: '数据值',
          align: 'center',
          dataIndex: 'dataValue'
        }
      ],
      url: {
        list: '/healthy/gdHealthyPrediction/list',
        delete: '/healthy/gdHealthyPrediction/delete',
        deleteBatch: '/healthy/gdHealthyPrediction/deleteBatch',
        exportXlsUrl: '/healthy/gdHealthyPrediction/exportXls',
        importExcelUrl: 'healthy/gdHealthyPrediction/importExcel'
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      form: {
        startTime:
          '' ||
          moment()
            .subtract(1, 'day')
            .format('YYYY-MM-DD HH:mm:ss'),
        endTime: '' || moment().format('YYYY-MM-DD HH:mm:ss'),
        locations: [],
        states: []
      },
      equipData: [],
      dictOptions: {},
      superFieldList: [],
      dataSource: [],
      SHOW_CHILD,
      loading: false,
      nGetDataList: debounce(this.getDataList, 800),
      disableMixinCreated: true
    }
  },
  created() {
    // this.getSuperFieldList();
    this.getEquipData()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    disabledStartDate(startValue) {
      // const endValue = this.form.endTime;
      // if (!startValue || !endValue) {
      //   return false;
      // }
      // return startValue.valueOf() > moment(endValue).valueOf();
      return startValue.valueOf() > moment().valueOf()
    },
    disabledEndDate(endValue) {
      // const startValue = this.form.startTime;
      // if (!endValue || !startValue) {
      //   return false;
      // }
      // return  moment(startValue).valueOf() >= endValue.valueOf();
      return endValue.valueOf() > moment().valueOf()
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    },
    historyClose() {
      this.$emit('historyHide')
    },
    moment,
    searchQuery() {},
    searchReset() {
      this.form = {
        startTime: moment()
          .subtract(1, 'day')
          .format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        locations: [],
        states: []
      }
    },
    getDataList(flag) {
      if (flag) this.ipagination.current = 1
      this.loading = true
      let defaultStart = moment()
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      let defaultEnd = moment().format('YYYY-MM-DD HH:mm:ss')
      let param = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        locations: this.form.locations.join(','),
        states: this.form.states.join(',')
      }
      if (!this.form.startTime && !this.form.endTime) {
        param.startTime = defaultStart
        param.endTime = defaultEnd
      } else {
        param.startTime = this.form.startTime
        param.endTime = this.form.endTime
      }
      getAction('/statistics/queryDataBoardHistory', param)
        .then(res => {
          if (res && res.code == 200) {
            this.ipagination.total = res.result.total
            this.dataSource = res.result.records
            console.log('this.dataSource=>>', this.dataSource)
            this.loading = false
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.getDataList()
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';

.history-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  .title-text {
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
}
.j-table-force-nowrap {
  /deep/.ant-empty-normal {
    margin: 200px 0 !important;
  }
}
.treeSelect {
  /deep/.ant-select-selection--multiple .ant-select-selection__choice {
    visibility: hidden;
  }
  /deep/.ant-select-search__field {
    visibility: hidden;
  }
}
</style>
